.pages-box {
  display: flex;
  width: 100%;
  height: 100%;
  // min-height: 65vh;
  .pages-left-close {
    width: 0px;
    border: none; 
    .flot-btn{
      right: -20px;
    }
    .page-heard {
      display: none;
    }
    .pages-left-content {
      display: none;
    }
    .card-item {
      display: none;
    }
  }
}
.pages-left {
  position: relative;
  width: 277px;
  margin-right: 20px;
  
    transition: all 0.5s;
    box-shadow: 2px 0px 4px 0px rgba(151,136,115,0.08), inset -1px 0px 0px 0px rgba(231,231,231,1);
  background: #fefefe; 
  border-radius: @radius-hw-box1; 
  border: 1px solid #D2AD77;
}
.pages-left-child {
  width: 300px;
  position: relative;
  // margin-right: 20px;
  box-shadow: 2px 0px 4px 0px rgba(151,136,115,0.08), inset -1px 0px 0px 0px rgba(231,231,231,1);

    transition: all 0.5s;
  // overflow-y: auto;
  background: #fefefe;
  // border-radius: @radius-hw-box1;
  // border: 1px solid #D2AD77;
}
.flot-btn {
  position: absolute;
  top: 100px;
  right: -8px;
  width: 16px;
  height: 48px;
  background: #fefefe;
  box-shadow: 2px 0px 4px 0px rgba(151, 136, 115, 0.08);
  border-radius: 8px;
  border: 1px solid #e7e7e7;
}
.pages-right {
  flex: 1;
  background: #fefefe;
  border-radius: @radius-hw-box1;
  border: 1px solid #D2AD77;
  
}
.ages-right-child{
  flex: 1;
  background: #fefefe;
  border-radius: @radius-hw-box1;
  border: 1px solid #D2AD77;
  margin: 32px;
  height: 84vh;
  overflow-y: auto;
}
.page-heard {
  display: flex;
  padding: 13px 16px;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
  span {
    font-size: 16px;
    font-family: SourceHanSerifCN-Medium, SourceHanSerifCN;
    font-weight: 500;
    color: #37372f;
    line-height: 22px;
  }
}
.heard-icon {
  width: 24px;
  height: 24px;
  border-radius: @radius-hw-box1;
  border: 1px solid #dcdcdc;
}
.pages-left-content {
  padding: 13px 16px;
}
.card-item {
  display: flex;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: @radius-hw-box1;
  justify-content: space-between;
}
.card-item-border{
  border-bottom: 1px solid rgba(230, 230, 230, 0.5);
}
.card-item:hover {
  .card-item-right {
    opacity: 1;
  }
}
.card-item-left {
  font-size: 16px;
}
.card-item-right {
  opacity: 0;
}
.card-item-b {
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
}
.chang-item-active {
  background: #f0e9e1;

  color: #d2ad77;
}
.operation-box {
  display: flex;
  justify-content: left;
  align-items: center;
  span {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #d2ad77;
    margin-right: 8px;
  }
}
.title-1 {
  display: flex;
  align-items: center;
  font-size: 16px;
  .my-style {
    margin-left: 6px;
    width: 28px;
    height: 20px;
    background: #d2ad77;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
  }
} 
.title-2 { 
  color: #999;
  font-size: 16px;
} 
